<template>
  <div class="article-item">
    <van-cell :to="'/article/' + article.art_id" class="my-cell">
      <!-- 自定义标题插槽 -->
      <div slot="title" class="title">{{ article.title }}</div>
      <!-- 标题下面的插槽 -->
      <div slot="label" class="label">
        <div class="cover3" v-if="article.cover.type == 3">
          <van-image v-for="(item, index) in article.cover.images" :key="index" width="100" height="100" :src="item" />
        </div>
        <span>{{ article.aut_name }}</span>
        <span>{{ article.comm_count }}</span>
        <span>{{ article.pubdate | formatDate }}</span>
      </div>
      <!-- 自定义右侧图片插槽 -->
      <van-image v-if="article.cover.type == 1" :src="article.cover.images[0]" />
    </van-cell>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  created () {

  },

  methods: {

  }
}
</script>

<style scoped lang='less'>
  .article-item {
    .my-cell {
      .title {
        font-size: 32px;
        color: #3a3a3a;
        width: 100%;
      }
      .label {
        color: #b4b4b4;
        font-size: 23px;
        span {
          margin-right: 20px;
        }
        .cover3 {
          display: flex;
          justify-content: space-between;
          margin: 15px 0;
          .van-image {
            flex: 1;
            height: 146px;
          }
          .van-image:nth-child(2) {
            margin: 0 10px;
          }
        }
      }
      .van-cell__value {
        flex: unset;
        width: 232px;
        .van-image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
